<!--
@BLINK-ALLOW:focus*
@AURALINUX-ALLOW:focus*
@WAIT-FOR:done
-->
<!-- Only the first image that uses a given map gets its area children.
When the image moves, it may no longer be the first image. Therefore, the
children must be recomputed for both the image that moved and the new
first image that uses that map -->
<img id="img0" alt="star0" usemap="#map0"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<img id="img1" alt="star1" usemap="#map"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<img id="img2" alt="star2" usemap="#map"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<map name="map0">
  <area shape="rect" coords="0,0,5,5" href="about:blank" alt="Area">
</map>
<map name="map">
  <area shape="rect" coords="0,0,5,5" href="about:blank" alt="Area">
  <area shape="rect" coords="3,3,8,8" href="about:blank" alt="Area2" autofocus>
</map>
<div id="container">
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      // Move the second image (first image that uses #map) to the end.
      container.appendChild(document.querySelector('img[usemap="#map"]'));
      document.title = 'done';
    }, 250);
  });
</script>
